.edit-icon-modal {
  h2 {
    font-size: $medium;
  }

  .modal__content {
    @include vertical-modal-layout;
  }

  &__preview-card {
    max-height: 203px;
    overflow: hidden;

    &__fleet,
    &__self-service {
      width: 500px;
    }

    &__fleet {
      h1 {
        width: 400px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      img {
        border-radius: $border-radius-xxlarge;
      }
    }

    &__self-service {
      height: 350px;
    }
  }

  &__preview-img-container {
    img {
      width: 124%;
    }
  }

  &__preview-img-container--mobile {
    img {
      width: 100%; // TODO
    }
  }

  &__preview-results-count {
    display: flex;
    align-items: center;
    gap: $pad-medium;
    height: 40px;

    > span:first-child {
      font-weight: $bold;
    }
  }

  &__preview-table {
    width: 520px;
    height: 100px;
    border-top-right-radius: 0;
  }

  &__self-service-preview {
    position: relative;
    top: -79px;
    left: 188px;
    display: flex;
    gap: $pad-xsmall;
    font-size: 12px;
    align-items: center;
    max-width: 210px;

    .software-icon__xsmall {
      border-radius: $border-radius-small;
    }
  }

  &__self-service-preview--mobile {
    position: relative;
    top: -88px;
    left: 156px;
    display: flex;
    gap: $pad-small;
    font-size: 12px;
    align-items: center;
    max-width: 210px;

    .software-icon__xsmall {
      border-radius: $border-radius-small;
    }
  }

  // Required for tooltip truncating long software names
  &__self-service-preview-name {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__self-service-preview-name-version--mobile {
    display: flex;
    flex-direction: column;
    font-size: $xxx-small;
  }

  // Required for tooltip truncating long software names
  &__self-service-preview-name--mobile {
    max-width: 115px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    font-weight: $bold;
  }

  &__mask-overlay {
    position: relative;
    width: 550px;

    background: linear-gradient(
      180deg,
      rgba(249, 250, 252, 0) 0%,
      rgba(249, 250, 252, 0.75) 29.33%,
      #f9fafc 83.17%
    );

    &--fleet {
      bottom: 156px;
      height: 135px;
    }
    &--self-service {
      bottom: 200px;
      height: 75px;
    }
  }

  .modal-footer__content-wrapper {
    padding-top: $pad-large;
  }
}
